<script setup lang="ts">
import type { CourseItem } from '@/types/course'
import { config } from '@/global'

const props = defineProps<{
  course: CourseItem
}>()
const navigateToEdit = () => {
  uni.navigateTo({
    url: `/pagesOrgan/course/addOrUpdate?id=${props.course.id}`,
  })
}
</script>

<template>
  <view class="course-card" @click="navigateToEdit">
    <image class="course-image" mode="aspectFill" :src="config.baseURL + course.bannerUrl"></image>
    <view class="course-info">
      <view class="course-title"
        >{{ course.subjects }}
        <view
          class="status-tag"
          :class="course.subjectStatus === '1' ? 'status-online' : 'status-offline'"
        >
          {{ course.subjectStatus === '1' ? '上架中' : '已下架' }}
        </view>
      </view>
      <view class="course-meta">
        <text class="course-price">¥{{ course.subjectPrices }}</text>
        <text class="course-hours">{{ course.classNum || '0' }}课时</text>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.course-card {
  width: 100%;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  margin-bottom: 24rpx;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer; // 添加鼠标指针样式
  &:active {
    transform: scale(0.98);
  }
}

.course-image {
  width: 100%;
  height: 300rpx;
}

.course-info {
  padding: 24rpx;
}

.course-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 16rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  position: relative;
  padding-right: 100rpx;
}
.status-tag {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  padding: 4rpx 16rpx;
  border-radius: 16rpx;
  font-size: 24rpx;
  font-weight: normal;
}

.status-online {
  background-color: #e1f3d8;
  color: #67c23a;
}

.status-offline {
  background-color: #fef0f0;
  color: #f56c6c;
}

.course-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.course-hours {
  font-size: 28rpx;
  color: #666;
}
.course-price {
  font-size: 30rpx;
  font-weight: bold;
  color: #ff7d00;
}
</style>
